
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>文本批量替换工具</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>        body {
        font-family: 'Inter', sans-serif;
        padding: 30px;
        background-color: #f8f9fa;
        color: #333;
    }

    h2, h3 {
        margin-bottom: 20px;
        color: #2c3e50;
    }

    .container {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .column {
        flex: 1 1 45%;
        min-width: 300px;
        background: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    label {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 6px;
        display: block;
    }

    textarea, input {
        width: 100%;
        padding: 10px;
        margin-top: 4px;
        box-sizing: border-box;
        border-radius: 6px;
        border: 1px solid #ccc;
        font-size: 14px;
        transition: border-color 0.3s ease;
    }

    textarea:focus, input:focus {
        border-color: #4CAF50;
        outline: none;
    }

    #rules, #inputText {
        height: 15em;
        resize: vertical;
    }

    .input-line {
        display: flex;
        justify-content: space-between;
        gap: 15px;
        margin-top: 10px;
        flex-wrap: wrap;
    }

    .input-line label {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    button {
        margin-top: 20px;
        padding: 12px 24px;
        font-size: 16px;
        background: linear-gradient(to right, #4CAF50, #66bb6a);
        color: white;
        border: none;
        border-radius: 30px;
        cursor: pointer;
        transition: background 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    button:hover {
        background: linear-gradient(to right, #45a049, #81c784);
    }

    #result {
        margin-top: 20px;
        white-space: pre-wrap;
        background: #f1f3f5;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-family: monospace;
        max-height: 300px;
        overflow-y: auto;
    }
    </style>
</head>
<body>

<h2><i class="fas fa-magic"></i> 批量替换工具</h2>

<div class="container">
    <div class="column">
        <label for="rules">替换规则（每行一个，格式：原始值[TAB]替换值）</label>
        <textarea id="rules" placeholder="例如：
123	abc
456	def"></textarea>
    </div>
    <div class="column">
        <label for="inputText">待替换文本</label>
        <textarea id="inputText" placeholder="在这里输入需要处理的文本..."></textarea>
    </div>
</div>

<div class="input-line">
    <label>
        原前缀
        <input id="prefixFrom" placeholder="如: id=" autocomplete="off" />
    </label>
    <label>
        原后缀
        <input id="suffixFrom" placeholder="如: ]" autocomplete="off" />
    </label>
    <label>
        替前缀
        <input id="prefixTo" placeholder="如: uid=" autocomplete="off" />
    </label>
    <label>
        替后缀
        <input id="suffixTo" placeholder="如: )" autocomplete="off" />
    </label>
</div>

<div style="display: flex; gap: 10px;">
    <button onclick="replaceText()">
        <i class="fas fa-sync-alt"></i> 点击替换
    </button>
    <button onclick="copyResult()" style="background: linear-gradient(to right, #2196F3, #42a5f5);">
        <i class="fas fa-copy"></i> 复制结果
    </button>
</div>

<h3>替换结果：</h3>
<div id="result"></div>

<script>    function escapeRegExp(string) {
    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

function replaceText() {
    const rulesText = document.getElementById("rules").value.trim();
    const inputText = document.getElementById("inputText").value;
    const prefixFrom = document.getElementById("prefixFrom").value || '';
    const suffixFrom = document.getElementById("suffixFrom").value || '';
    const prefixTo = document.getElementById("prefixTo").value || '';
    const suffixTo = document.getElementById("suffixTo").value || '';

    const ruleLines = rulesText.split('\n');
    let result = inputText;

    for (let line of ruleLines) {
        const [from, to] = line.trim().split(/\s+/);
        if (from && to) {
            const pattern = escapeRegExp(prefixFrom + from + suffixFrom);
            const replacement = prefixTo + to + suffixTo;
            const regex = new RegExp(pattern, 'g');
            result = result.replace(regex, replacement);
        }
    }

    document.getElementById("result").textContent = result;
}

async function copyResult() {
    const resultDiv = document.getElementById("result");
    const text = resultDiv.textContent;

    if (!text.trim()) {
        alert("没有可复制的内容！");
        return;
    }

    try {
        await navigator.clipboard.writeText(text);
        alert("内容已复制到剪贴板！");
    } catch (err) {
        // 回退到旧方法（如页面未通过 HTTPS 加载）
        const textarea = document.createElement("textarea");
        textarea.value = text;
        document.body.appendChild(textarea);
        textarea.select();
        try {
            document.execCommand('copy');
            alert("内容已复制到剪贴板（旧方式）！");
        } catch (err) {
            alert("复制失败，请手动复制。");
        }
        document.body.removeChild(textarea);
    }
}
</script>

</body>
</html>
